<template>
  <!-- <n-theme-editor> -->
  <n-config-provider
    :locale="zhCN"
    :date-locale="dateZhCN"
    :theme-overrides="theme"
  >
    <n-loading-bar-provider>
      <n-message-provider>
        <register-message keep-alive />
        <n-notification-provider>
          <router-view v-slot="{ Component }">
            <transition name="fade" mode="out-in">
              <component :is="Component" />
            </transition>
          </router-view>
        </n-notification-provider>
      </n-message-provider>
    </n-loading-bar-provider>
  </n-config-provider>
  <!-- </n-theme-editor> -->
</template>

<script setup>
import { h } from 'vue'
import {
  useMessage,
  NMessageProvider,
  NNotificationProvider,
  NLoadingBarProvider,
  zhCN,
  dateZhCN,
  NThemeEditor
} from 'naive-ui'

const RegisterMessage = {
  setup() {
    // register global message
    window.$message = useMessage()
    return () => h('span', { id: 'register-message-box' })
  }
}

const theme = {
  common: {
    fontFamily: 'PingFang SC,Hiragino Sans GB,Microsoft YaHei,-apple-system-font,Helvetica Neue,Helvetica,sans-serif',
    primaryColor: '#4F8AFF',
    primaryColorHover: '#4F8AFF',
    primaryColorFocus: '#4F8AFF',
    primaryColorPressed: '#4F8AFF'
  },
  Menu: {
    itemTextColorHover: '#4F8AFF',
    itemIconColorHover: '#4F8AFF'
  },
  Button: {
    colorError: '#F82917',
    colorHoverError: '#FD543F',
    colorPressedError: '#D01A11',
    colorFocusError: '#FD543F',
    colorDisabledError: '#F82917'
  }
}
</script>

<style>
*,*:before,*:after {
  box-sizing: border-box;
}
p,h1,h2,h3,h4,h5 {
  margin-top: 0;
}
body {
  /* Noto Serif SC */
  font: 14px/1.5 'PingFang SC','Hiragino Sans GB','Microsoft YaHei',-apple-system-font,Helvetica Neue,Helvetica,sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -moz-osx-font-smoothing: grayscale;
  background-color: #fff;
  color: #333;
  padding: 0;
  margin: 0;
  min-width: 900px;
}
img {
  vertical-align: top;
  user-select: none;
  -webkit-user-drag: none;
}
.n-image-preview-toolbar .n-base-icon {
  box-sizing: content-box;
}
#app {
  position: relative;
}
html, body, #app, #app > .n-config-provider {
  height: 100%;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.ie-clearfix:after {
  display: table;
  clear: both;
  content: '';
}

.ie-pullright {
  float: right !important;
}
</style>

<style lang="less">
.ie-page {
  height: 100%;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity .3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.fade-slide-leave-active,
.fade-slide-enter-active {
  transition: all 0.3s;
}

.fade-slide-enter-from {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-slide-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

.n-select {

  .n-tag {
    color: #909399;
    background-color: #f4f4f5;
    height: 22px;
    font-size: 12px;
    line-height: 18px;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    padding: 0 7px;
    border-radius: 4px;

    .n-tag__close {
      font-size: 12px;
    }

    .n-tag__border {
      border: 0 !important;
    }
  }
}
</style>

<style>
.arco-tree-node {
  line-height: 2 !important;
}
</style>